<!-- 左侧导航栏 -->
<template>
  
  <el-row class="tac" >
     
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        :router="true"
        active-text-color="#ffd04b"
      >
       <el-menu-item v-for="item in noChildren" :index="item.name" :key="item.name">
          
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{ item.label }}</span>
       </el-menu-item>
       

       <el-submenu v-for="item in hasChildren" :key="item.label" :index="item.name">
         <template slot="title">
            <i :class="`el-icon-${item.icon}`"></i>
            <span >{{ item.label }}</span>
         </template>
          <!-- 二级菜单 -->
          <el-menu-item v-for="two in item.children"  :key="two.name" :index="two.name">
            <i :class="`el-icon-${two.icon}`"></i>
            <span slot="title">{{ two.label }}</span>
          </el-menu-item>
        </el-submenu>
       
        
      </el-menu>
  </el-row>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh
  
}


</style>

<script>
export default {
  data() {
    return {
      meunData: [
        {
          path:"/home",
          name: "home",
          label: "首页",
          icon: "s-home",
        },
        {
          name: "xitong",
          label: "系统设置",
          icon: "s-tools",
          children: [
            {
              // path: "/addUser",
              name: "user",
              label: "用户管理",
              icon: "s-custom",
            },
            {
              path: "/count",
              name: "count",
              label: "统计报表",
              icon: "s-custom",
            },
          ],
        },
        {
          name: "member",
          label: "会员管理",
          icon: ""
        },
        {
          name : "consumption",
          label : "消费结算",
          icon : "",
        },
        {
          name : "notice",
          label : "公告管理",
          icon : "",
        },
        {
          name : "releasenotice",
          label : "发布公告",
          icon : "",
        },
      ],
    };
  },
  computed : {
    //没有子菜单
    noChildren(){
      return this.meunData.filter(item  => !item.children)
    },
     hasChildren(){
      return this.meunData.filter(item  => item.children)
    },
  }
};
</script>

